<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue事件处理</title>
</head>
<body>
  <div id="demo">
    <h1>v-for和v-if，谁的优先级更高？应该如何正确使用避免性能问题？</h1>
    <!-- 错误写法 -->
    <p v-for="child in children" v-if="isFolder">{{child.title}}</p>

    <!-- 正确写法 -->
    <!-- <template v-if="isFolder">
      <p v-for="child in children">{{child.title}}</p>
    </template> -->
  </div>

  <script src="/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#demo',
      data: { // 根 data -- 1
        children: [
          {title: 'foo'},
          {title: 'bar'}
        ]
      },
      // data() { // 根 data -- 2
      //   return {
      //     children: [
      //       {title: 'foo'},
      //       {title: 'bar'}
      //     ]
      //   }
      // },
      computed: {
        isFolder() {
          return this.children && this.children.length > 0
        }
      }
    })

    console.log(app.$options.render)
  </script>
</body>
</html>